<template>
  <div class="shop-list">
    <!-- 附近商家 -->
    <h3 class="near-shop"><span class="iconfont icon-more"></span> 附近商家</h3>

    <div class="shop-item" v-for="(item,index) in shops" 
      :key="index" @click="itemClick(index)">
      <!-- 商家图像 -->
      <div class="shop-img">
        <img :src="item.image_path" />
      </div>
      <!-- 商家信息 -->
      <div class="shop-info">
        <!-- 商家主要信息 -->
        <div class="shop-main-info">
          <!-- 标题 -->
          <div>
            <span class="koubei"
              ><img src="~assets/images/koubei.jpg" alt=""
            /></span>
            <span class="shop-name">{{item.name}}</span>
          </div>
          
          <!-- 评分模块 -->
          <shop-score 
            :rating="item.rating"
            :recent_order_num="item.recent_order_num">
          </shop-score>

          <!-- 配送费模块 -->
          <div class="shop-fee">
            <div>￥20起送</div>
            <div>/</div>
            <div>{{item.piecewise_agent_fee.tips}}</div>
          </div>
        </div>
        <!-- 商品保证信息 -->
        <div class="shop-promise">
          <div>
            <img src="~assets/images/go1.jpg" alt="" />
            <img src="~assets/images/go2.jpg" alt="" />
            <img src="~assets/images/go3.jpg" alt="" />
          </div>
          <div>FT专送</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import ShopScore from './ShopScore.vue'

export default {
  name: "ShopList",
  components: {
    ShopScore
  },
  computed: {
    ...mapState(['shops'])
  },
  methods: {
    itemClick(index){
      console.log("当前的商家", index)
    }
  }
};
</script>

<style lang="less" scoped>
.near-shop {
  margin: 16px 0;
  height: 24px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  vertical-align: middle;
  .icon-more {
    font-size: 18px;
  }
}

.shop-item {
  display: flex;
  height: 90px;
  margin: 12px 0;
  .shop-img {
    display: flex;
    flex: 2;
    justify-content: center;
    align-items: center;
    img {
      display: block;
      width: 94%;
      height: 94%;
      margin: 0 auto;
      border-radius: 12px;
      vertical-align: middle;
    }
  }
  .shop-info {
    flex: 5;
    display: flex;
  }
}

.shop-main-info {
  flex: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  & div:nth-child(n) {
    display: flex;
  }
}

.shop-promise {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.koubei {
  width: 46px;
  img {
    width: 100%;
    vertical-align: middle;
  }
}

.shop-name {
  overflow: hidden;
  width: 160px;
  margin-left: 4px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-fee {
  font-size: 12px;
  color: rgba(100, 100, 100, 0.8);
  div:nth-child(2) {
    padding: 0 4px;
  }
}

.shop-promise {
  text-align: center;
  div:first-child {
    img {
      width: 16px;
    }
  }
  div:last-child {
    font-size: 12px;
    white-space: nowrap;
    color: #ff8097;
    background-color: #f8d3db;
  }
}
</style>